<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>路灯控制系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/layui-v2.5.6/layui/css/layui.css}"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">路灯控制系统</div>
        <!-- 动态时间 -->
        <div class="layui-nav main_headerBox main_left layui-layout-left">
            <nobr>
                <span id="newTime"></span>
            </nobr>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <!--<ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>-->
        <ul class="layui-nav layui-layout-right">
            <!--<li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>-->
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">实时状态</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:void(0)" lay-id="/test" lay-url="/test">回路列表</a></dd>
                        <dd><a href="javascript:;">单灯列表</a></dd>
                        <!--<dd><a href="">超链接</a></dd>-->
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">设备管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">回路</a></dd>
                        <dd><a href="javascript:;">单灯</a></dd>
                        <!--<dd><a href="">超链接</a></dd>-->
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">报警管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">回路</a></dd>
                        <dd><a href="javascript:;">单灯</a></dd>
                        <!--<dd><a href="">超链接</a></dd>-->
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">方案管理</a></li>
                <li class="layui-nav-item"><a href="">场景管理</a></li>
            </ul>
        </div>
    </div>

    <article class="layui-body" >
        <div class="index_main" style="width:99%">
            <div class="layui-tab layui-tab-brief" lay-filter="test1" lay-allowClose="true" style="height: 100%">
                <ul class="layui-tab-title">
                    <li class="layui-this main-index" lay-id="main">首页</li>
                </ul>
                <div class="layui-tab-content" style="height: calc(100% - 20px);">
                    <div class="layui-tab-item layui-show" style="height: 100%;">
                        <div class="index_info_box">
                            <div class="index_msg_box">
                                <a href="javascript:">设备总数：<span>0</span></a>
                                <a href="javascript:">在线：<span>0</span></a>
                                <a href="javascript:">离线：<span>0</span></a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script th:src="@{/lib/layui-v2.5.6/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/index.js}" type="text/javascript" charset="utf-8"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

        // //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        // var layid = location.hash.replace(/^#test1=/, '');
        // element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项
        //
        // //监听Tab切换，以改变地址hash值
        // element.on('tab(test1)', function(){
        //     location.hash = 'test1='+ this.getAttribute('lay-id');
        // });
    });
</script>
</body>
</html>
